<template>
  <div class="employees -container">
    <div class="app-container">
      <!-- 顶部 -->
      <PageTools>
        <template #left>
          <span>本月: 社保在缴 公积金在缴</span>
        </template>

        <template #right>
          <!-- 跳转传参：告诉人家你的身份，员工页面。
          $router.push({
            path:'/import',
            query:{
              type:'user',
              username:'pp'
            }
          })  这种写法麻烦，可以写成如下 $router.push('/import?type=user&username=pp')-->
          <el-button type="primary" size="small" @click="$router.push('/import?type=user')">excel导入</el-button>
          <el-button type="primary" size="small" @click="handleExport">excel导出</el-button>
          <el-button type="primary" size="small" @click="showDialog=true">新增员工</el-button>
        </template>
      </PageTools>

      <!-- 表格 -->
      <el-card v-loading="isLoading" style="margin-top: 10px;">
        <el-table :data="employeeList" border>
          <el-table-column label="序号" type="index" :index="indexMethod" sortable="" />
          <el-table-column label="头像" prop="staffphoto" sortable="">
            <template #default="{row}">
              <img
                v-imgerror="imgerror"
                class="staffphoto"
                :src="row.staffPhoto || defaultImg"
                alt=""
                @click="clickImg"
              >
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="手机号" prop="mobile" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column label="聘用形式" :formatter="formatEmployment" prop="formOfEmployment" sortable="" />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <template #default="{row}">
              {{ row.timeOfEntry | formateTime('YYYY年MM月DD日') }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="delEmployees(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            :total="total"
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[2,4,6,8]"
            layout="total,sizes,prev, pager, next,jumper"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <!-- 查看弹框[添加] -->
      <AddEmployee :show-dialog.sync="showDialog" @add-employee="getEmployeeList" />
      <!-- 二维码 -->
      <el-dialog
        title="二维码"
        :visible="displayDialog"
        width="400px"
        @close="displayDialog=false"
      >
        <canvas ref="myCanvas" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PageTools from '@/components/PageTools'
import { reqGetEmployeeList, reqDelEmployee } from '@/api/employees'
// 导入常量
import obj from '@/constant/employees'
import AddEmployee from './components/add-employee'
import dayjs from 'dayjs'
import ErrorImg from '@/assets/404_images/404not.png'
import QrCode from 'qrcode'
export default {
  name: 'Employees',
  components: {
    PageTools,
    AddEmployee
  },
  data() {
    return {
      page: 2,
      size: 2,
      pageSize: 2,
      employeeList: [],
      total: 0,
      isLoading: false,
      showDialog: false,
      defaultImg: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2146034403,1504718527&fm=26&gp=0.jpg',
      imgerror: ErrorImg,
      displayDialog: false
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() {
      this.isLoading = true
      const { data: { rows, total }} = await reqGetEmployeeList(this.page, this.size)
      this.employeeList = rows
      this.total = total
      this.isLoading = false
    },
    // ====== 序号 ======
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.size
    },
    handleCurrentChange(val) {
      this.page = val
      this.getEmployeeList()
    },
    // [聘用形式]--格式化  element-ui提供的格式化形式：:formatter="formatEmployment"
    formatEmployment(row, column, cellValue, index) {
      const { hireType } = obj
      // 依据cellValue（id）去 hireType 数组中找相同的id项  [后台给的id是字符串形式，需要转换成数字]
      const results = hireType.find(item => item.id === +cellValue)
      return results ? results.value : '未知'
    },
    // ====== 删除 ======
    delEmployees(id) {
      this.$confirm('您确定要删除吗？', '温馨提示').then(async() => {
        await reqDelEmployee(id)
        this.$message.success('删除成功')
        if (this.employeeList.length === 1 && this.page > 1) {
          this.page--
        }
        this.getEmployeeList()
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    // ====== 导出 ======
    async handleExport() {
      // 表头
      const headersArr = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
      // 中英对照关系
      const headersRelations = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 请注意: 如果导出的是当前页, 那么数据, this.list 即可,
      // 但是我们一般导出的是全部的数据, 需要请求到所有的数据
      const { data: { rows }} = await reqGetEmployeeList(1, this.total)
      // 二维数组
      const resultsArr = this.formateFn(rows, headersArr, headersRelations)
      import('@/vendor/Export2Excel').then(excel => {
        // console.log('导出',excel)
        excel.export_json_to_excel({
          header: headersArr, // 表头 必填  传数组：有序
          data: resultsArr, // 具体数据 必填  二维数组：保证行列式有序的
          filename: '学生信息表', // 文件名  非必填
          autoWidth: true, // 列宽是否自适应 非必填
          bookType: 'xlsx' // 生成文件后缀名 非必填
        })
      })
    },
    // **** 返回一个二维数组，用于展示：将rows转化为一个二维数组
    // 作用：rows（数据）--- 决定有多少行 , headersArr --- 决定有多少列, headersRelations（中英对照关系）
    formateFn(rows, headersArr, headersRelations) {
      const resultsArr = []
      rows.forEach(item => {
        const arr = []
        // key 中文键名  englishkey 英文键名
        headersArr.forEach((key, index) => {
          const englishkey = headersRelations[key]
          // 存值
          let valuekey = item[englishkey]
          // 日期格式处理
          if (['timeOfEntry', 'correctionTime'].includes(englishkey)) {
            valuekey = dayjs(valuekey).format('YYYY-MM-DD')
          }
          // 聘用形式格式处理
          if (englishkey === 'formOfEmployment') {
            const { hireType } = obj
            // 根据val==>1,作为id去数组中找到对应项，得到value：正式/非正式
            const result = hireType.find(hireTypeObj => hireTypeObj.id === +valuekey)
            valuekey = result ? result.value : '未知'
          }

          arr.push(valuekey)
        })
        return resultsArr.push(arr)
      })
    },
    // ====== 二维码 ======
    clickImg(imgUrl) {
      // 若没有图片，就不能点击，弹框不显示
      if (!imgUrl) return
      this.displayDialog = true
      this.$nextTick(() => {
        // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
        QrCode.toCanvas(this.$refs.myCanvas, imgUrl)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 .staffphoto {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }

</style>
